//js方式打开弹框,如果需要写jsx语法,那么需要
//1. vue升级到3.4,那么不用在写jsx语法时,引入h,否则需要在函数外引入h,(import {h} from 'vue'),如果使用elementplus的组件,需要引入进来.
//2.vite中加上:
// esbuild: {
//     jsxFactory: 'h',
//     jsxFragment: 'Fragment',
//  },
//否则报错react is not defined
//3.<script lang="jsx">
import {createVNode,createApp,defineAsyncComponent,h } from 'vue'
import ElementPlus, { ElButton } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import dialog from './index.vue'
//打开弹框
export default function openADialog(props) {
    debugger
    //1.创建一个真实dom
    const container = document.createElement('div')
    //2.拿到组件
    //const dialog = defineAsyncComponent(() => import("@/components/DetailDialogBackPaging/index.vue"));
    //3.组件与pops结合生成虚拟节点
    let slots = _handleSlotsFromConfig(props)
    let vnode = h(dialog,   //参考https://cn.vuejs.org/guide/extras/render-function.html#passing-slots
        {//props和监听
            onClose:()=>{
                vnode = null
                container.remove()
            },
            ...props,
        },
        slots
    )
    //use第三方组件,否则报错;挂载
    createApp(vnode).use(ElementPlus, {locale: zhCn}).mount(container).showDialog = true
    //4.将真实dom添加到body上
    document.body.appendChild(container)
}
const _handleSlotsFromConfig = (props)=>{
    let detailPropList = props.detailPropList
    let result = {}
    detailPropList.filter(el=>el.slot).forEach(item=>{
        result[`table-${item.prop}`] = item.slot
    })
    return result;
}
//父组件:----------------------------------------------------------------------------------------------------
// 方式一:h(createVNode)渲染函数
// h(MyComponent, null, {
//     default: () => 'default slot',
//     foo: () => h('div', 'foo'),
//     bar: () => [h('span', 'one'), h('span', 'two')],
//     footer: ({ msg, list }) => [
//         h('h2', '我是作用域插槽'),
//         h('div', `msg: ${msg}`),
//         h('div', `list: 接收到了作用域插槽（C组件的List）---> ${list}`),
//     ]
// })
// 方式二:vue的JSX
// <MyComponent>
//  {{
//   default: () => 'default slot',
//   foo: () => <div>foo</div>,
//   bar: () => [<span>one</span>, <span>two</span>]
//   footer:({ msg, list }) => [
//            <h2>我是作用域插槽</h2>,
//            <div>msg: {msg}</div>,
//            <div>list: 接收到了作用域插槽（C组件的List）---> {list}</div>
//        ]
// }}
// </MyComponent>
// 方式三:vue的模板语法
{/* 
<MyComponent>
    <template #default>
        'default slot'
    </template>
    <template #foo>
        <div>
            foo
        </div>
    </template>
    <template #bar>
        <span>
            one
        </span>
        <span>
            two
        </span>
    </template>
    <template #footer="{msg,list}">
        <h2>
            我是作用域插槽
        </h2>
        <div>
            msg: {{msg}}
        </div>
        <div>
            list: 接收到了作用域插槽（C组件的List）---> {{list}}
        </div>
    </template>
</MyComponent> 
*/}

//子组件:-------------------------------------------------------------------------------------
//方式一:使用h函数,将父组件传来的vnode渲染
// export default {
//   props: ['message'],
//   setup(props, { slots }) {
//     return () => [
//       // 默认插槽：
//       // <div><slot /></div>
//       h('div', slots.default()),

//       // 具名插槽：
//       // <div><slot name="footer" :text="message" /></div>
//       h(
//         'div',
//         slots.footer({
//           text: props.message
//         })
//       )
//     ]
//   }
// }
//方式二:使用vue的JSX
// 默认插槽
{/*
 <div>{slots.default()}</div>
// 具名插槽
<div>{slots.footer({ text: props.message })}</div>
 */}
 //方式三:vue的模板语法

// 默认插槽
{/*
 <div>
    <slot></slot>
 </div>
// 具名插槽
<div>
    <slot name="footer" :text=props.message></slot>
</div>
 */}


//  const openDialog = ()=>{
//     let config = {
//       detailPropList:[//表格的列信息
//           { prop: 'enterprisename', label: '所属企业', minWidth: '120' },
//           { prop: 'instrument', label: '仪表位号', minWidth: '120' },
//           { prop: 'ispause', label: '是否暂停', minWidth: '60',codeMap:[{title:"是",value:"1"},{title:"否",value:"0"}]},
//           { prop: 'pausereason', label: '暂停原因', minWidth: '60'},
//           { prop: 'createtime', label: '数据产生时间', minWidth: '60',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
//           { prop: 'plannedrecoverytime', label: '预计恢复时间', minWidth: '60'},
//           { prop: 'handler',label: '操作', minWidth: '60',slot:(scope)=>{
//               return <div>12</div>
//           }},
//       ],
//       }